<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Backgrounds and Borders Module Level 4</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module contains the features of CSS relating to the borders and backgrounds of boxes on the page. It includes and extends the functionality of <a href=&quot;https://www.w3.org/TR/css3-background/&quot;>CSS Backgrounds and Borders Level&amp;nbsp;3</a>. [[CSS3BG]] The main extensions compared to level&amp;nbsp;3 are shaping (&apos;corner-shape&apos;) and clipping borders (&apos;border-clip&apos;), logical background positions (&apos;background-position&apos;), and the &apos;&apos;extend&apos;&apos; ability of &apos;background-repeat&apos;." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-backgrounds-4/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Backgrounds and Borders Module Level 4</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-backgrounds-4/">https://drafts.csswg.org/css-backgrounds-4/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-backgrounds-4/">https://www.w3.org/TR/css-backgrounds-4/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="3343"><a class="p-name fn u-email email" href="mailto:bert@w3.org">Bert Bos</a> (<span class="p-org org">W3C</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="52258"><a class="p-name fn u-url url" href="http://lea.verou.me/about/">Lea Verou</a> (<span class="p-org org">Invited Expert</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-backgrounds-4/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-4">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning">
    <details class="annoying-warning" open>
     <summary>Not Ready For Implementation</summary>
     <p> This spec is not yet ready for implementation.
		It exists in this repository to record the ideas and promote discussion. </p>
     <p> Before attempting to implement this spec,
		please contact the CSSWG at www-style@w3.org. </p>
    </details>
   </div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module contains the features of CSS relating to the borders and backgrounds of boxes on the page. It includes and extends the functionality of <a href="https://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Level 3</a>. <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> The main extensions compared to level 3 are shaping (<a class="property" data-link-type="propdesc" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape">corner-shape</a>) and clipping borders (<a class="property" data-link-type="propdesc" href="#propdef-border-clip" id="ref-for-propdef-border-clip">border-clip</a>), logical background positions (<a class="property" data-link-type="propdesc" href="#propdef-background-position" id="ref-for-propdef-background-position">background-position</a>), and the <span class="css">extend</span> ability of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat" id="ref-for-propdef-background-repeat">background-repeat</a>.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-backgrounds” in the title,
	preferably like this:
	“[css-backgrounds] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
    <li>
     <a href="#backgrounds"><span class="secno">2</span> <span class="content"> Backgrounds</span></a>
     <ol class="toc">
      <li>
       <a href="#the-background-position"><span class="secno">2.1</span> <span class="content"> Background Positioning: the <span class="property">background-position</span> shorthand property</span></a>
       <ol class="toc">
        <li><a href="#background-position-longhands"><span class="secno">2.1.1</span> <span class="content"> Background Positioning Longhands: the <span class="property">background-position-x</span>, <span class="property">background-position-y</span>, <span class="property">background-position-inline</span>, and <span class="property">background-position-block</span> properties</span></a>
       </ol>
      <li><a href="#background-clip"><span class="secno">2.2</span> <span class="content"> Painting Area: the <span class="property">background-clip</span> property</span></a>
     </ol>
    <li>
     <a href="#borders"><span class="secno">3</span> <span class="content"> Borders</span></a>
     <ol class="toc">
      <li><a href="#the-border-color"><span class="secno">3.1</span> <span class="content">Line Colors: the <span class="property">border-color</span> properties</span></a>
     </ol>
    <li>
     <a href="#corners"><span class="secno">4</span> <span class="content"> Corners</span></a>
     <ol class="toc">
      <li><a href="#corner-sizing"><span class="secno">4.1</span> <span class="content"> Corner Sizing: the 'border-radius property</span></a>
      <li><a href="#corner-shaping"><span class="secno">4.2</span> <span class="content"> Corner Shaping: the <span class="property">corner-shape</span> property</span></a>
      <li><a href="#corners-shorthand"><span class="secno">4.3</span> <span class="content"> Corner Shape and Size: the <span class="property">corners</span> shorthand</span></a>
     </ol>
    <li>
     <a href="#partial-borders"><span class="secno">5</span> <span class="content"> Partial borders</span></a>
     <ol class="toc">
      <li><a href="#border-limit"><span class="secno">5.1</span> <span class="content"> Partial Borders: the <span class="property">border-limit</span> property</span></a>
      <li><a href="#border-clip"><span class="secno">5.2</span> <span class="content"> The <span class="property">border-clip</span> properties</span></a>
     </ol>
    <li>
     <a href="#changes"><span class="secno">6</span> <span class="content"> Changes</span></a>
     <ol class="toc">
      <li><a href="#level-changes"><span class="secno">6.1</span> <span class="content"> Additions Since Level 3</span></a>
     </ol>
    <li><a href="#acknowledgments"><span class="secno">7</span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p class="issue" id="issue-ea0786c6"><a class="self-link" href="#issue-ea0786c6"></a> This module is currently maintained as a diff against Level 3.
		We will fold in the text once it’s all formatted up and in CR again,
		as this will reduce the effort of keeping them in sync
		(source diffs will be accurate in reflecting the differences). </p>
   <h2 class="heading settled" data-level="2" id="backgrounds"><span class="secno">2. </span><span class="content"> Backgrounds</span><a class="self-link" href="#backgrounds"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="the-background-position"><span class="secno">2.1. </span><span class="content"> Background Positioning: the <a class="property" data-link-type="propdesc" href="#propdef-background-position" id="ref-for-propdef-background-position①">background-position</a> shorthand property</span><a class="self-link" href="#the-background-position"></a></h3>
   <table class="def propdef" data-link-for-hint="background-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-position">background-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position">&lt;position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>See <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> for definition.</p>
   <p>Where </p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-position">&lt;position></dfn> = [  [ left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> right <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> top <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> bottom <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a> ]
<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a>
  [ left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> right <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> x-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> x-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a> ]
  [ top <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> bottom <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> y-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> y-end <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a> ]
<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a>
  [ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> [ left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> right <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> x-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> x-end ] <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③">&lt;length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&amp;&amp;</a>
  [ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> [ top <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> bottom <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> y-start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> y-end ] <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④">&lt;length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> ]
<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a>
  [ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑧">|</a> [ start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑨">|</a> end ] <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤">&lt;length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> ]
  [ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⓪">|</a> [ start <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③①">|</a> end ] <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑥">&lt;length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> ]  ]</pre>
   <p>Values have the following meanings:</p>
   <dl>
    <dt>One value 
    <dd> If only one value is given,
			and that value is <span class="css">start</span> or <span class="css">end</span>,
			then the keyword is duplicated;
			otherwise the second keyword defaults to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-backgrounds-3/#valdef-background-position-center" id="ref-for-valdef-background-position-center">center</a>.
			The resulting value is treated as a two-component value. 
    <dt>More than one value 
    <dd>
      If the value contains a <span class="css">start</span> or <span class="css">end</span> keyword,
			then the shorthand sets <a class="property" data-link-type="propdesc" href="#propdef-background-position-inline" id="ref-for-propdef-background-position-inline">background-position-inline</a> and <a class="property" data-link-type="propdesc" href="#propdef-background-position-block" id="ref-for-propdef-background-position-block">background-position-block</a> to the specified values.
			Otherwise
			the shorthand sets <a class="property" data-link-type="propdesc" href="#propdef-background-position-x" id="ref-for-propdef-background-position-x">background-position-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-background-position-y" id="ref-for-propdef-background-position-y">background-position-y</a> to the specified values. 
     <p class="issue" id="issue-e752f96e"><a class="self-link" href="#issue-e752f96e"></a> Specify the value assignment in more detail. Should expand just like Level 3.</p>
   </dl>
   <p class="issue" id="issue-f4a1aeb0"><a class="self-link" href="#issue-f4a1aeb0"></a> Specify what happens to set of properties that are not set. Maybe they’re just not set?</p>
   <h4 class="heading settled" data-level="2.1.1" id="background-position-longhands"><span class="secno">2.1.1. </span><span class="content"> Background Positioning Longhands: the <a class="property" data-link-type="propdesc" href="#propdef-background-position-x" id="ref-for-propdef-background-position-x①">background-position-x</a>, <a class="property" data-link-type="propdesc" href="#propdef-background-position-y" id="ref-for-propdef-background-position-y①">background-position-y</a>, <a class="property" data-link-type="propdesc" href="#propdef-background-position-inline" id="ref-for-propdef-background-position-inline①">background-position-inline</a>, and <a class="property" data-link-type="propdesc" href="#propdef-background-position-block" id="ref-for-propdef-background-position-block①">background-position-block</a> properties</span><a class="self-link" href="#background-position-longhands"></a></h4>
   <p class="issue" id="issue-67389536"><a class="self-link" href="#issue-67389536"></a> This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.</p>
   <table class="def propdef" data-link-for-hint="background-position-x">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-position-x">background-position-x</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> [ [ left <span id="ref-for-comb-one③③">|</span> right <span id="ref-for-comb-one③④">|</span> x-start <span id="ref-for-comb-one③⑤">|</span> x-end ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑦">&lt;length-percentage></a><span id="ref-for-mult-opt⑤">?</span> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-req" id="ref-for-mult-req">!</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0% 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to width of background positioning area <em>minus</em> width of background image 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: an offset given as a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑧">&lt;length-percentage></a> value, plus an origin keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property specifies the background position’s horizontal component.
	An omitted origin keyword is assumed to be <a class="css" data-link-type="maybe" href="#valdef-border-limit-left" id="ref-for-valdef-border-limit-left">left</a>.</p>
   <table class="def propdef" data-link-for-hint="background-position-y">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-position-y">background-position-y</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑥">|</a> [ [ top <span id="ref-for-comb-one③⑦">|</span> bottom <span id="ref-for-comb-one③⑧">|</span> y-start <span id="ref-for-comb-one③⑨">|</span> y-end ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑨">&lt;length-percentage></a><span id="ref-for-mult-opt⑦">?</span> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-req" id="ref-for-mult-req①">!</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0% 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to height of background positioning area <em>minus</em> height of background image 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: an offset given as a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⓪">&lt;length-percentage></a> value, plus an origin keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property specifies the background position’s vertical component.
	An omitted origin keyword is assumed to be <a class="css" data-link-type="maybe" href="#valdef-border-limit-top" id="ref-for-valdef-border-limit-top">top</a>.</p>
   <table class="def propdef" data-link-for-hint="background-position-inline">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-position-inline">background-position-inline</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⓪">|</a> [ start <span id="ref-for-comb-one④①">|</span> end ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑧">?</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①①">&lt;length-percentage></a><span id="ref-for-mult-opt⑨">?</span> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma③">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>not applicable (initial value comes from physical property) 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to inline-size of background positioning area <em>minus</em> inline-size of background image 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: an offset given as a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①②">&lt;length-percentage></a> value, plus an origin keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property specifies the background position’s inline-axis component.
	An omitted origin keyword is assumed to be <span class="css">start</span>.</p>
   <table class="def propdef" data-link-for-hint="background-position-block">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-position-block">background-position-block</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ center <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④②">|</a> [ start <span id="ref-for-comb-one④③">|</span> end ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①③">&lt;length-percentage></a><span id="ref-for-mult-opt①①">?</span> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma④">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>not applicable (initial value comes from physical property) 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to size of background positioning area <em>minus</em> size of background image 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: an offset given as a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①④">&lt;length-percentage></a> value, plus an origin keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property specifies the background position’s block-axis component.
	An omitted origin keyword is assumed to be <span class="css">start</span>.</p>
   <h3 class="heading settled" data-level="2.2" id="background-clip"><span class="secno">2.2. </span><span class="content"> Painting Area: the <a class="property" data-link-type="propdesc" href="#propdef-background-clip" id="ref-for-propdef-background-clip">background-clip</a> property</span><a class="self-link" href="#background-clip"></a></h3>
   <table class="def propdef" data-link-for-hint="background-clip">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-clip">background-clip</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-bg-clip" id="ref-for-typedef-bg-clip">&lt;bg-clip></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma⑤">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>border-box 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Determines the <dfn data-dfn-type="dfn" data-export id="background-painting-area">background painting area<a class="self-link" href="#background-painting-area"></a></dfn>,
	which determines the area within which the background is painted.
	The syntax of the property is given with</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-bg-clip">&lt;bg-clip></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-box" id="ref-for-typedef-box">&lt;box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④④">|</a> border <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑤">|</a> text
</pre>
   <p class="issue" id="issue-09d02635"><a class="self-link" href="#issue-09d02635"></a> Or should this be defining the <span class="css">-webkit-background-clip</span> property,
	saying that all the values are identical,
	with this additional <a class="css" data-link-type="maybe" href="#valdef-background-clip-text" id="ref-for-valdef-background-clip-text">text</a> value?</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="background-clip, <bg-clip>" data-dfn-type="value" data-export id="valdef-background-clip-box"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-box" id="ref-for-typedef-box①">&lt;box></a><a class="self-link" href="#valdef-background-clip-box"></a></dfn> 
    <dd> The background is painted within (clipped to)
			the specified box of the element. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="background-clip, <bg-clip>" data-dfn-type="value" data-export id="valdef-background-clip-text">text</dfn> 
    <dd> The background is painted within (clipped to)
			the intersection of the border box
			and the geometry of the text in the element and its in-flow and floated descendants. 
    <dt><dfn class="css" data-dfn-for="background-clip, <bg-clip>" data-dfn-type="value" data-export id="valdef-background-clip-border">border<a class="self-link" href="#valdef-background-clip-border"></a></dfn>
    <dd> The background is clipped to the area painted by the border, taking <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style</a> into account but ignoring any transparency introduced by <a class="property" data-link-type="propdesc" href="#propdef-border-color" id="ref-for-propdef-border-color">border-color</a>. 
   </dl>
   <h2 class="heading settled" data-level="3" id="borders"><span class="secno">3. </span><span class="content"> Borders</span><a class="self-link" href="#borders"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="the-border-color"><span class="secno">3.1. </span><span class="content">Line Colors: the <a class="property" data-link-type="propdesc" href="#propdef-border-color" id="ref-for-propdef-border-color①">border-color</a> properties</span><a class="self-link" href="#the-border-color"></a></h3>
   <table class="def propdef" data-link-for-hint="border-top-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="css" data-dfn-type="property" data-export id="propdef-border-top-color">border-top-color<a class="self-link" href="#propdef-border-top-color"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-border-right-color">border-right-color<a class="self-link" href="#propdef-border-right-color"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-border-bottom-color">border-bottom-color<a class="self-link" href="#propdef-border-bottom-color"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-border-left-color">border-left-color<a class="self-link" href="#propdef-border-left-color"></a></dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma⑥">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>currentcolor 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the computed color 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see prose 
   </table>
   <table class="def propdef" data-link-for-hint="border-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-color">border-color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma⑦">#{1,4}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>These properties set the foreground color of the border specified
	by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style①">border-style</a> properties.
	If a list of values is provided, the border is split into equal width bands of each color
	along the direction of the side the border is applied on
	(i.e. split horizontally on left and right borders and vertically on top and bottom borders),
	starting outwards.</p>
   <p>When interpolating between borders with the same number of colors,
	interpolation is performed individually per color band as <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a>.
	Interpolation between borders with different numbers of colors is discrete.</p>
   <p><a class="property" data-link-type="propdesc" href="#propdef-border-color" id="ref-for-propdef-border-color②">border-color</a> is a shorthand for the four <a class="property" data-link-type="propdesc">border-*-color</a> properties.
	The four values set the top, right, bottom and left border, respectively.
	A missing left is the same as right,
	a missing bottom is the same as top,
	and a missing right is also the same as top.
	This is resolved individually for each list item.</p>
   <div class="example" id="example-771d7ee1">
    <a class="self-link" href="#example-771d7ee1"></a> Using multiple colors for each side: 
<pre class="lang-css highlight"><c- f>.foo </c-><c- p>{</c->
  <c- k>border</c-><c- p>:</c-> <c- m>30</c-><c- l>px</c-> solid<c- p>;</c->
  <c- k>border-color</c-><c- p>:</c-> skyblue orange yellowgreen indianred<c- p>,</c-> black yellow<c- p>;</c->
<c- p>}</c->
</pre>
    <p>Sample rendering:</p>
    <p><img alt src="images/multicolor-border.png"></p>
    <p>The same border colors with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style②">border-style: dotted</a>:</p>
    <p><img alt src="images/multicolor-border-dotted.png"></p>
   </div>
   <p class="issue" id="issue-bce6fb8f"><a class="self-link" href="#issue-bce6fb8f"></a> The syntax for comma-separated multiple colors <a href="https://github.com/w3c/csswg-drafts/issues/1172#issuecomment-379878579">is still under active discussion</a> in the CSS WG.</p>
   <h2 class="heading settled" data-level="4" id="corners"><span class="secno">4. </span><span class="content"> Corners</span><a class="self-link" href="#corners"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="corner-sizing"><span class="secno">4.1. </span><span class="content"> Corner Sizing: the 'border-radius property</span><a class="self-link" href="#corner-sizing"></a></h3>
   <table class="def propdef" data-link-for-hint="border-radius">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-radius">border-radius</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑤">&lt;length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,4}</a> [ / <span class="production" id="ref-for-typedef-length-percentage①⑥">&lt;length-percentage></span><span id="ref-for-mult-num-range①">{1,4}</span> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①②">?</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>all elements, except table element when <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-4/#valdef-text-space-collapse-collapse" id="ref-for-valdef-text-space-collapse-collapse">collapse</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>See <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>.</p>
   <h3 class="heading settled" data-level="4.2" id="corner-shaping"><span class="secno">4.2. </span><span class="content"> Corner Shaping: the <a class="property" data-link-type="propdesc" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape①">corner-shape</a> property</span><a class="self-link" href="#corner-shaping"></a></h3>
   <table class="def propdef" data-link-for-hint="corner-shape">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-corner-shape">corner-shape</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ round <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑥">|</a> angle ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,4}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>round 
     <tr>
      <th>Applies to:
      <td>all elements, except table element when <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse①">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-4/#valdef-text-space-collapse-collapse" id="ref-for-valdef-text-space-collapse-collapse①">collapse</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>By default, non-zero border-radii define
	a quarter-ellipse that rounds the affected corners.
	However in some cases, other corner shapes are desired.
	The <a class="property" data-link-type="propdesc" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape②">corner-shape</a> property specifies a reinterpretation of the radii
	to define other corner shapes.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="corner-shape" data-dfn-type="value" data-export id="valdef-corner-shape-round"><a class="css" data-link-type="maybe" href="#valdef-corner-shape-round" id="ref-for-valdef-corner-shape-round">round</a></dfn> 
    <dd>Border radii define a convex elliptical curve at the corner. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="corner-shape" data-dfn-type="value" data-export id="valdef-corner-shape-angle"><a class="css" data-link-type="maybe" href="#valdef-corner-shape-angle" id="ref-for-valdef-corner-shape-angle">angle</a></dfn> 
    <dd>Border radii define a diagonal slice at the corner. 
   </dl>
   <div class="example" id="example-bdf759ac">
    <a class="self-link" href="#example-bdf759ac"></a> For example, the following declarations create a right-pointing next button. 
<pre>a {
  border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
  corner-shape: round angle angle round;
  padding: .5em 1em .5em .5em;
}
</pre>
    <div style="font: bold 200%/1 sans-serif;
			width: 2.3em;
			width: min-content;
			white-space: nowrap;
			padding: .5em 1.1em .5em .5em;
			border-radius: .3em 0 0 .3em;
			background: url(&apos;data:image/svg+xml,\
			<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 80 40&quot;>\
			    <path d=&quot;m 0 0 h 65 l 10 20 l -10 20 h -65 z&quot; fill=&quot;yellowgreen&quot; />\
			</svg>&apos;) no-repeat 0 / auto 100%"> Next </div>
     As a fallback in UAs that don’t support <a class="property" data-link-type="propdesc" href="#propdef-border-radius" id="ref-for-propdef-border-radius">border-radius</a>,
		the right side would be rounded rather than pointy: 
    <div style="font: bold 200%/1 sans-serif;
			width: 2.3em;
			width: min-content;
			white-space: nowrap;
			padding: .5em 1em .5em .5em;
			border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
			background: yellowgreen"> Next </div>
   </div>
   <p class="issue" id="issue-7e583689"><a class="self-link" href="#issue-7e583689"></a> How to allow custom corners? Perhaps a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path" id="ref-for-funcdef-path">path()</a> function? Or a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-easing-1/#funcdef-cubic-bezier-easing-function-cubic-bezier" id="ref-for-funcdef-cubic-bezier-easing-function-cubic-bezier">cubic-bezier()</a>?
		Something else? </p>
   <h3 class="heading settled" data-level="4.3" id="corners-shorthand"><span class="secno">4.3. </span><span class="content"> Corner Shape and Size: the <a class="property" data-link-type="propdesc" href="#propdef-corners" id="ref-for-propdef-corners">corners</a> shorthand</span><a class="self-link" href="#corners-shorthand"></a></h3>
   <table class="def propdef" data-link-for-hint="corners">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-corners">corners</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape③">&lt;'corner-shape'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="#propdef-border-radius" id="ref-for-propdef-border-radius①">&lt;'border-radius'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-corners" id="ref-for-propdef-corners①">corners</a> shorthand sets <a class="property" data-link-type="propdesc" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape④">corner-shape</a> and <a class="property" data-link-type="propdesc" href="#propdef-border-radius" id="ref-for-propdef-border-radius②">border-radius</a> in the same declaration.
	If either is omitted, it is reset to its initial value.</p>
   <div class="example" id="example-1d63f029">
    <a class="self-link" href="#example-1d63f029"></a> For example, the following declaration creates a diamond shape. 
<pre>corners: angle 50%;</pre>
    <p>In UAs that don’t support <a class="property" data-link-type="propdesc" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape⑤">corner-shape</a>, the declaration is ignored
		(falls back to a rectangle).</p>
   </div>
   <div class="example" id="example-b1757c6a">
    <a class="self-link" href="#example-b1757c6a"></a> In this example, the first declaration creates tabs with vertical sides and rounded corners using <a class="property" data-link-type="propdesc" href="#propdef-border-radius" id="ref-for-propdef-border-radius③">border-radius</a>,
		while the second example makes them trapezoid-shaped in UAs that support <a class="property" data-link-type="propdesc" href="#propdef-corners" id="ref-for-propdef-corners②">corners</a>. 
<pre>border-radius: 0.25em 0.25em 0 0;
corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;
</pre>
   </div>
   <h2 class="heading settled" data-level="5" id="partial-borders"><span class="secno">5. </span><span class="content"> Partial borders</span><a class="self-link" href="#partial-borders"></a></h2>
   <p>CSS borders traditionally cover an entire border edge. Sometimes,
	however, it can be useful to hide some parts of the border. </p>
   <p class="issue" id="issue-76b7fb28"><a class="self-link" href="#issue-76b7fb28"></a> Here are two proposals for doing this:
		the second one is from GCPM, the first one is an attempt to recast it more readably.
		The names are terrible, known problem, proposals accepted.
		There is a problem with conceiving this as clipping:
		if you have dotted borders, you want whole dots always, not parts of dots.
		So it should be a drawing limit, not a clip. </p>
   <h3 class="heading settled" data-level="5.1" id="border-limit"><span class="secno">5.1. </span><span class="content"> Partial Borders: the <a class="property" data-link-type="propdesc" href="#propdef-border-limit" id="ref-for-propdef-border-limit">border-limit</a> property</span><a class="self-link" href="#border-limit"></a></h3>
   <table class="def propdef" data-link-for-hint="border-limit">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-limit">border-limit</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">all <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑦">|</a> [ sides <span id="ref-for-comb-one④⑧">|</span> corners ] <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑦">&lt;length-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①③">?</a> <span id="ref-for-comb-one④⑨">|</span> [ top <span id="ref-for-comb-one⑤⓪">|</span> right <span id="ref-for-comb-one⑤①">|</span> bottom <span id="ref-for-comb-one⑤②">|</span> left ] <span class="production" id="ref-for-typedef-length-percentage①⑧">&lt;length-percentage></span> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>round 
     <tr>
      <th>Applies to:
      <td>all elements, except table element when <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse②">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-4/#valdef-text-space-collapse-collapse" id="ref-for-valdef-text-space-collapse-collapse②">collapse</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>relative to border-box 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>By default, the entire border is drawn. However, border rendering can be
		limited to only part of a border. The keyword specifies which part, and
		the length or percentage specifies how much. </p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="border-limit" data-dfn-type="value" data-export id="valdef-border-limit-sides"><a class="css" data-link-type="maybe" href="#valdef-border-limit-sides" id="ref-for-valdef-border-limit-sides">sides</a></dfn> 
    <dd>The sides are drawn up to but not including the corners (as defined
			by the border radii). A length or percentage is measured from the center
			of each side: <span class="css">50%</span> draws the middle 50% of the border; by default the
			entire side is drawn. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="border-limit" data-dfn-type="value" data-export id="valdef-border-limit-corners"><a class="css" data-link-type="maybe" href="#valdef-border-limit-corners" id="ref-for-valdef-border-limit-corners">corners</a></dfn> 
    <dd>The corners are drawn plus the specified distance into the sides if
			specified. A length is measured from the closest edge of the corner area.
			A percentage is measured from the absolute corner of the border box. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="border-limit" data-dfn-type="value" data-export id="valdef-border-limit-left"><a class="css" data-link-type="maybe" href="#valdef-border-limit-left" id="ref-for-valdef-border-limit-left①">left</a></dfn> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="border-limit" data-dfn-type="value" data-export id="valdef-border-limit-right"><a class="css" data-link-type="maybe" href="#valdef-border-limit-right" id="ref-for-valdef-border-limit-right">right</a></dfn> 
    <dd>For the left and right (vertical) sides, draws the entire side and
			corner. For the top and bottom (horizontal) sides, draws the left/right
			portion, as specified. Distances are measured as for <a class="css" data-link-type="maybe" href="#valdef-border-limit-corners" id="ref-for-valdef-border-limit-corners①">corners</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="border-limit" data-dfn-type="value" data-export id="valdef-border-limit-top"><a class="css" data-link-type="maybe" href="#valdef-border-limit-top" id="ref-for-valdef-border-limit-top①">top</a></dfn> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="border-limit" data-dfn-type="value" data-export id="valdef-border-limit-bottom"><a class="css" data-link-type="maybe" href="#valdef-border-limit-bottom" id="ref-for-valdef-border-limit-bottom">bottom</a></dfn> 
    <dd>For the top and bottom (horizontal) sides, draws the entire side and
			corner. For the left and right (vertical) sides, draws the top/bottom
			portion, as specified. Distances are measured as for <a class="css" data-link-type="maybe" href="#valdef-border-limit-corners" id="ref-for-valdef-border-limit-corners②">corners</a>. 
   </dl>
   <div class="example" id="example-26cbba08">
    <a class="self-link" href="#example-26cbba08"></a> 
    <p>The following example draws only the middle 50% of the sides.</p>
<pre>box { border: solid; border-parts: sides 50% }</pre>
    <p>The following example draws only the curved parts of the corners.</p>
<pre>box { border: solid; border-radius: 1em 2em; border-parts: corners; }</pre>
    <p>The following example draws only the left 4em of the top border.</p>
<pre>box { border-top: solid; border-parts: left 4em; }<p>The following example draws only the first 10px of each corner:</p>
<pre>box { border: solid; border-parts: corners 10px; }</pre>		<p>The following example draws the curved part of the corner plus 5px
		along the sides:</p>
		<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 5px; }</pre>		<p>The following example draws the curved part of the corner and all of
		the side except the middle 40%.</p>
		<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 30%; }</pre>	</pre>
   </div>
   <h3 class="heading settled" data-level="5.2" id="border-clip"><span class="secno">5.2. </span><span class="content"> The <a class="property" data-link-type="propdesc" href="#propdef-border-clip" id="ref-for-propdef-border-clip①">border-clip</a> properties</span><a class="self-link" href="#border-clip"></a></h3>
   <table class="def propdef" data-link-for-hint="border-clip">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-clip">border-clip</dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-border-clip-top">border-clip-top<a class="self-link" href="#propdef-border-clip-top"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-border-clip-right">border-clip-right<a class="self-link" href="#propdef-border-clip-right"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-border-clip-bottom">border-clip-bottom<a class="self-link" href="#propdef-border-clip-bottom"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export id="propdef-border-clip-left">border-clip-left<a class="self-link" href="#propdef-border-clip-left"></a></dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤③">|</a> [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑨">&lt;length-percentage></a> <span id="ref-for-comb-one⑤④">|</span> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-1/#typedef-flex" id="ref-for-typedef-flex" title="Expands to: fr">&lt;flex></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to length of border-edge side 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td><span class="css">normal</span>, or a list consisting of absolute lengths, or percentages as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p class="issue" id="issue-3b47c92d"><a class="self-link" href="#issue-3b47c92d"></a>Should these properties be simplified to only accept <code>normal | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②⓪">&lt;length-percentage></a>+</code>? </p>
   <p>These properties split their respective borders into parts along
		the border edge. The first part is visible, the second is invisible,
		the third part is visible, etc. Parts can be specified with lengths,
		percentages, or flexible lengths (expressed by the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-1/#valdef-flex-fr" id="ref-for-valdef-flex-fr">fr</a> unit, as per <a data-link-type="biblio" href="#biblio-css3grid">[CSS3GRID]</a>).
		The <span class="css">normal</span> value means
		that the border is not split, but shown normally. </p>
   <p><a class="property" data-link-type="propdesc" href="#propdef-border-clip" id="ref-for-propdef-border-clip②">border-clip</a> is a shorthand property for the four individual properties. </p>
   <p>If the listed parts are shorter than the border, any remaining
		border is split proportionally between the specified flexible lengths. If
		there are no flexible lengths, the behavior is as if <span class="css">1fr</span> had been
		specified at the end of the list. </p>
   <p>If the listed parts are longer than the border, the specified parts
		will be shown in full until the end of the border. In this case, all
		flexible lengths will be zero. </p>
   <p>For horizontal borders, parts are listed from left to right. For
		vertical borders, parts are listed from top to bottom. </p>
   <p>The exact border parts are determined by laying out the specified border
		parts with all flexible lengths initially set to zero. Any remaining border is
		split proportionally between the flexible lengths specified. </p>
   <div class="example" id="example-95b349db">
    <a class="self-link" href="#example-95b349db"></a> 
<pre>border-clip: 10px 1fr 10px;</pre>
    <div style="position: relative; width: 250px; height: 150px; background: white;">
     <div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
      <div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
      <div style="position: absolute; background: white; left: -5px; top: 15px; height: 70px; width: 210px"></div>
     </div>
    </div>
   </div>
   <div class="example" id="example-176c2608">
    <a class="self-link" href="#example-176c2608"></a> 
<pre>border-clip-top: 10px 1fr 10px;
border-clip-bottom: 10px 1fr 10px;
border-clip-right: 5px 1fr 5px;
border-clip-left: 5px 1fr 5px;
</pre>
    <div style="position: relative; width: 250px; height: 150px; background: white;">
     <div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
      <div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
      <div style="position: absolute; background: white; left: -5px; top: 5px; height: 90px; width: 210px"></div>
     </div>
    </div>
   </div>
   <div class="example" id="example-e8737f7d">
    <a class="self-link" href="#example-e8737f7d"></a> 
    <p>By making the first part have zero length, the inverse border of
			the previous example can easily be created: </p>
<pre>border-clip-top: 0 10px 1fr 10px;
border-clip-bottom: 0 10px 1fr 10px;
border-clip-right: 0 5px 1fr 5px;
border-clip-left: 0 5px 1fr 5px;
</pre>
    <div style="position: relative; width: 250px; height: 150px; background: white;">
     <div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
      <div style="position: absolute; background: white; left: -5px; top: -5px; height: 10px; width: 15px"></div>
      <div style="position: absolute; background: white; right: -5px; top: -5px; height: 10px; width: 15px"></div>
      <div style="position: absolute; background: white; left: -5px; top: 95px; height: 10px; width: 15px"></div>
      <div style="position: absolute; background: white; right: -5px; top: 95px; height: 10px; width: 15px"></div>
     </div>
    </div>
   </div>
   <div class="example" id="example-d41a977a">
    <a class="self-link" href="#example-d41a977a"></a> 
<pre>border: thin solid black;
border-clip: 0 1fr; /* hide borders */
border-clip-top: 10px 1fr 10px; /* make certain borders visible */
border-clip-bottom: 10px 1fr 10px;
</pre>
    <div style="position: relative; width: 250px; height: 150px; background: white;">
     <div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
      <div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
      <div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
     </div>
    </div>
   </div>
   <div class="example" id="example-98a129b5">
    <a class="self-link" href="#example-98a129b5"></a> 
<pre>border-top: thin solid black;
border-bottom: thin solid black;
border-clip-top: 10px;
border-clip-bottom: 10px;
</pre>
    <div style="position: relative; width: 250px; height: 150px; background: white;">
     <div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
      <div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
      <div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
     </div>
    </div>
   </div>
   <div class="example" id="example-1c13dad3">
    <a class="self-link" href="#example-1c13dad3"></a> 
<pre>border-top: thin solid black;
border-clip: 10px;
</pre>
    <div style="position: relative; width: 250px; height: 150px; background: white;">
     <div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
      <div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
      <div style="position: absolute; background: white; left: -5px; top: 0px; height: 110px; width: 210px"></div>
     </div>
    </div>
   </div>
   <div class="example" id="example-ae44ad9a">
    <a class="self-link" href="#example-ae44ad9a"></a> 
    <p>This rendering: </p>
    <div style="background: white; padding: 0.2em 0.5em">
<pre style="margin-left: 0">A sentence consists of words¹.
</pre>
     <div style="width: 3em; height: 2px; background: black"></div>
<pre style="margin-left: 0">¹ Most often.
</pre>
    </div>
     can be achieved with this style sheet: 
<pre>@footnote {
  border-top: thin solid black;
  border-clip: 4em;
}
</pre>
   </div>
   <div class="example" id="example-99d06270">
    <a class="self-link" href="#example-99d06270"></a> 
<pre>border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>
    <p>In this example, the repeat pattern is shown five times and there is, by coincidence,	no remaining border. </p>
    <div style="position: relative; width: 100px; background: white; padding: 20px">
     <div style="border: 2px solid black; height: 40px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
    </div>
   </div>
   <div class="example" id="example-e3af350b">
    <a class="self-link" href="#example-e3af350b"></a> 
<pre>border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>
    <p>In this example, the repeat pattern is shown five times. The box in this example is slightly wider than the box in the previous example. The remaining border is taken up by a flexible length, as if this code had been specified: </p>
<pre>border: 2px solid black;
border-top-parts: repeat(10px 10px) 1fr;
</pre>
    <div style="position: relative; width: 105px; background: white; padding: 20px">
     <div style="border: 2px solid black; height: 40px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
     <div style="position: absolute; background: red; width: 5px; height: 2px; top: 20px; left: 120px"></div>
    </div>
    <p>The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA. </p>
   </div>
   <div class="example" id="example-462b42b7">
    <a class="self-link" href="#example-462b42b7"></a> 
<pre>border: 4px solid black;
border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
</pre>
    <p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them. </p>
    <div style="position: relative; width: 192px; background: white; padding: 40px">
     <div style="border: 4px solid black; height: 40px"></div>
     <div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
     <div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
     <div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
     <div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
     <div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>
    </div>
    <p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs. </p>
   </div>
   <div class="example" id="example-c3fc1e9a">
    <a class="self-link" href="#example-c3fc1e9a"></a> 
<pre>border: 4px solid black;
border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
</pre>
    <p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them. </p>
    <div style="position: relative; width: 192px; background: white; padding: 40px">
     <div style="border: 4px solid black; height: 40px"></div>
     <div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
     <div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
     <div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
     <div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
     <div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>
    </div>
    <p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs. </p>
   </div>
   <div class="example" id="example-9c2df8ad">
    <a class="self-link" href="#example-9c2df8ad"></a> 
<pre>border: 4px solid black;
border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
</pre>
    <p>All but one of the visible border parts are represented as flexible lengths in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px: </p>
    <div style="position: relative; width: 190px; background: white; padding: 40px">
     <div style="border: 4px solid black; border-top: none; height: 40px"></div>
     <div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 40px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 70px"></div>
     <div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 80px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 100px"></div>
     <div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 110px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 120px"></div>
     <div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 130px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 140px"></div>
     <div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 150px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 160px"></div>
     <div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 170px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 190px"></div>
     <div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 200px"></div>
    </div>
    <p>Here is another rendering where 1fr ends up being 30px: </p>
    <div style="position: relative; width: 440px; background: white; padding: 40px">
     <div style="border: 4px solid black; border-top: none; height: 40px"></div>
     <div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 40px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 130px"></div>
     <div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 140px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 200px"></div>
     <div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 210px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 240px"></div>
     <div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 250px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 260px"></div>
     <div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 270px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 300px"></div>
     <div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 310px"></div>
     <div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 370px"></div>
     <div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 390px"></div>
    </div>
    <p>The fragments are shown in red for illustrative purposes; they should be black in compliant UAs. </p>
   </div>
   <h2 class="heading settled" data-level="6" id="changes"><span class="secno">6. </span><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="heading settled" data-level="6.1" id="level-changes"><span class="secno">6.1. </span><span class="content"> Additions Since Level 3</span><a class="self-link" href="#level-changes"></a></h3>
   <p class="issue" id="issue-faa8d599"><a class="self-link" href="#issue-faa8d599"></a>Additions are a work in progress... here’s what we’re planning to add. :) </p>
   <ul>
    <li>logical <a class="property" data-link-type="propdesc" href="#propdef-background-position" id="ref-for-propdef-background-position②">background-position</a> values (<span class="css">start</span>, <span class="css">end</span>) 
    <li>the <span class="css">extend</span> keyword of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat" id="ref-for-propdef-background-repeat①">background-repeat</a> 
    <li><a class="property" data-link-type="propdesc" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape⑥">corner-shape</a> 
    <li>multiple border colors per border 
    <li>logical border properties 
    <li><a href="#partial-borders">Partial Borders</a> (make part of border shorthand as well!) 
    <li><a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0314.html">More <span class="css">border-radius</span> shorthands</a> for doing both corners on a side at once. 
    <li>Splitting horizontal / vertical spread radius for box-shadow, if we can come up with a sane syntax for it. 
   </ul>
   <h2 class="heading settled" data-level="7" id="acknowledgments"><span class="secno">7. </span><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>In addition to the many contributors to the <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a>, <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>,
	and <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> predecessors to this module,
	the editors would like to thank
	Tab Atkins,
	and Håkon Wium Lie
	for their suggestions and feedback specifically for this Level 4. </p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-corner-shape-angle">angle</a><span>, in §4.2</span>
   <li><a href="#propdef-background-clip">background-clip</a><span>, in §2.2</span>
   <li><a href="#background-painting-area">background painting area</a><span>, in §2.2</span>
   <li><a href="#propdef-background-position">background-position</a><span>, in §2.1</span>
   <li><a href="#propdef-background-position-block">background-position-block</a><span>, in §2.1.1</span>
   <li><a href="#propdef-background-position-inline">background-position-inline</a><span>, in §2.1.1</span>
   <li><a href="#propdef-background-position-x">background-position-x</a><span>, in §2.1.1</span>
   <li><a href="#propdef-background-position-y">background-position-y</a><span>, in §2.1.1</span>
   <li><a href="#typedef-bg-clip">&lt;bg-clip></a><span>, in §2.2</span>
   <li><a href="#valdef-background-clip-border">border</a><span>, in §2.2</span>
   <li><a href="#propdef-border-bottom-color">border-bottom-color</a><span>, in §3.1</span>
   <li><a href="#propdef-border-clip">border-clip</a><span>, in §5.2</span>
   <li><a href="#propdef-border-clip-bottom">border-clip-bottom</a><span>, in §5.2</span>
   <li><a href="#propdef-border-clip-left">border-clip-left</a><span>, in §5.2</span>
   <li><a href="#propdef-border-clip-right">border-clip-right</a><span>, in §5.2</span>
   <li><a href="#propdef-border-clip-top">border-clip-top</a><span>, in §5.2</span>
   <li><a href="#propdef-border-color">border-color</a><span>, in §3.1</span>
   <li><a href="#propdef-border-left-color">border-left-color</a><span>, in §3.1</span>
   <li><a href="#propdef-border-limit">border-limit</a><span>, in §5.1</span>
   <li><a href="#propdef-border-radius">border-radius</a><span>, in §4.1</span>
   <li><a href="#propdef-border-right-color">border-right-color</a><span>, in §3.1</span>
   <li><a href="#propdef-border-top-color">border-top-color</a><span>, in §3.1</span>
   <li><a href="#valdef-border-limit-bottom">bottom</a><span>, in §5.1</span>
   <li><a href="#valdef-background-clip-box">&lt;box></a><span>, in §2.2</span>
   <li>
    corners
    <ul>
     <li><a href="#propdef-corners">(property)</a><span>, in §4.3</span>
     <li><a href="#valdef-border-limit-corners">value for border-limit</a><span>, in §5.1</span>
    </ul>
   <li><a href="#propdef-corner-shape">corner-shape</a><span>, in §4.2</span>
   <li><a href="#valdef-border-limit-left">left</a><span>, in §5.1</span>
   <li><a href="#typedef-position">&lt;position></a><span>, in §2.1</span>
   <li><a href="#valdef-border-limit-right">right</a><span>, in §5.1</span>
   <li><a href="#valdef-corner-shape-round">round</a><span>, in §4.2</span>
   <li><a href="#valdef-border-limit-sides">sides</a><span>, in §5.1</span>
   <li><a href="#valdef-background-clip-text">text</a><span>, in §2.2</span>
   <li><a href="#valdef-border-limit-top">top</a><span>, in §5.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://drafts.csswg.org/css-color-3/#valuea-def-color">https://drafts.csswg.org/css-color-3/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">3.1. Line Colors: the border-color properties</a> <a href="#ref-for-valuea-def-color①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-cubic-bezier-easing-function-cubic-bezier">
   <a href="https://drafts.csswg.org/css-easing-1/#funcdef-cubic-bezier-easing-function-cubic-bezier">https://drafts.csswg.org/css-easing-1/#funcdef-cubic-bezier-easing-function-cubic-bezier</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-cubic-bezier-easing-function-cubic-bezier">4.2. 
Corner Shaping: the corner-shape property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-path">
   <a href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">https://drafts.csswg.org/css-shapes-2/#funcdef-path</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-path">4.2. 
Corner Shaping: the corner-shape property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-text-space-collapse-collapse">
   <a href="https://drafts.csswg.org/css-text-4/#valdef-text-space-collapse-collapse">https://drafts.csswg.org/css-text-4/#valdef-text-space-collapse-collapse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-space-collapse-collapse">4.1. 
Corner Sizing: the 'border-radius property</a>
    <li><a href="#ref-for-valdef-text-space-collapse-collapse①">4.2. 
Corner Shaping: the corner-shape property</a>
    <li><a href="#ref-for-valdef-text-space-collapse-collapse②">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-req">
   <a href="https://drafts.csswg.org/css-values-4/#mult-req">https://drafts.csswg.org/css-values-4/#mult-req</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-req">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a> <a href="#ref-for-mult-req①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-comma">
   <a href="https://drafts.csswg.org/css-values-4/#mult-comma">https://drafts.csswg.org/css-values-4/#mult-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">2.1. 
Background Positioning: the background-position shorthand property</a>
    <li><a href="#ref-for-mult-comma①">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a> <a href="#ref-for-mult-comma②">(2)</a> <a href="#ref-for-mult-comma③">(3)</a> <a href="#ref-for-mult-comma④">(4)</a>
    <li><a href="#ref-for-mult-comma⑤">2.2. 
Painting Area: the background-clip property</a>
    <li><a href="#ref-for-mult-comma⑥">3.1. Line Colors: the border-color properties</a> <a href="#ref-for-mult-comma⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-all">
   <a href="https://drafts.csswg.org/css-values-4/#comb-all">https://drafts.csswg.org/css-values-4/#comb-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-all">2.1. 
Background Positioning: the background-position shorthand property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-one-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-one-plus">https://drafts.csswg.org/css-values-4/#mult-one-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-one-plus">5.2. 
The border-clip properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">2.1. 
Background Positioning: the background-position shorthand property</a> <a href="#ref-for-typedef-length-percentage①">(2)</a> <a href="#ref-for-typedef-length-percentage②">(3)</a> <a href="#ref-for-typedef-length-percentage③">(4)</a> <a href="#ref-for-typedef-length-percentage④">(5)</a> <a href="#ref-for-typedef-length-percentage⑤">(6)</a> <a href="#ref-for-typedef-length-percentage⑥">(7)</a>
    <li><a href="#ref-for-typedef-length-percentage⑦">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a> <a href="#ref-for-typedef-length-percentage⑧">(2)</a> <a href="#ref-for-typedef-length-percentage⑨">(3)</a> <a href="#ref-for-typedef-length-percentage①⓪">(4)</a> <a href="#ref-for-typedef-length-percentage①①">(5)</a> <a href="#ref-for-typedef-length-percentage①②">(6)</a> <a href="#ref-for-typedef-length-percentage①③">(7)</a> <a href="#ref-for-typedef-length-percentage①④">(8)</a>
    <li><a href="#ref-for-typedef-length-percentage①⑤">4.1. 
Corner Sizing: the 'border-radius property</a> <a href="#ref-for-typedef-length-percentage①⑥">(2)</a>
    <li><a href="#ref-for-typedef-length-percentage①⑦">5.1. 
Partial Borders: the border-limit property</a> <a href="#ref-for-typedef-length-percentage①⑧">(2)</a>
    <li><a href="#ref-for-typedef-length-percentage①⑨">5.2. 
The border-clip properties</a> <a href="#ref-for-typedef-length-percentage②⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">2.1. 
Background Positioning: the background-position shorthand property</a> <a href="#ref-for-mult-opt①">(2)</a> <a href="#ref-for-mult-opt②">(3)</a> <a href="#ref-for-mult-opt③">(4)</a>
    <li><a href="#ref-for-mult-opt④">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a> <a href="#ref-for-mult-opt⑤">(2)</a> <a href="#ref-for-mult-opt⑥">(3)</a> <a href="#ref-for-mult-opt⑦">(4)</a> <a href="#ref-for-mult-opt⑧">(5)</a> <a href="#ref-for-mult-opt⑨">(6)</a> <a href="#ref-for-mult-opt①⓪">(7)</a> <a href="#ref-for-mult-opt①①">(8)</a>
    <li><a href="#ref-for-mult-opt①②">4.1. 
Corner Sizing: the 'border-radius property</a>
    <li><a href="#ref-for-mult-opt①③">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num-range">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num-range">4.1. 
Corner Sizing: the 'border-radius property</a> <a href="#ref-for-mult-num-range①">(2)</a>
    <li><a href="#ref-for-mult-num-range②">4.2. 
Corner Shaping: the corner-shape property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2.1. 
Background Positioning: the background-position shorthand property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a> <a href="#ref-for-comb-one⑤">(6)</a> <a href="#ref-for-comb-one⑥">(7)</a> <a href="#ref-for-comb-one⑦">(8)</a> <a href="#ref-for-comb-one⑧">(9)</a> <a href="#ref-for-comb-one⑨">(10)</a> <a href="#ref-for-comb-one①⓪">(11)</a> <a href="#ref-for-comb-one①①">(12)</a> <a href="#ref-for-comb-one①②">(13)</a> <a href="#ref-for-comb-one①③">(14)</a> <a href="#ref-for-comb-one①④">(15)</a> <a href="#ref-for-comb-one①⑤">(16)</a> <a href="#ref-for-comb-one①⑥">(17)</a> <a href="#ref-for-comb-one①⑦">(18)</a> <a href="#ref-for-comb-one①⑧">(19)</a> <a href="#ref-for-comb-one①⑨">(20)</a> <a href="#ref-for-comb-one②⓪">(21)</a> <a href="#ref-for-comb-one②①">(22)</a> <a href="#ref-for-comb-one②②">(23)</a> <a href="#ref-for-comb-one②③">(24)</a> <a href="#ref-for-comb-one②④">(25)</a> <a href="#ref-for-comb-one②⑤">(26)</a> <a href="#ref-for-comb-one②⑥">(27)</a> <a href="#ref-for-comb-one②⑦">(28)</a> <a href="#ref-for-comb-one②⑧">(29)</a> <a href="#ref-for-comb-one②⑨">(30)</a> <a href="#ref-for-comb-one③⓪">(31)</a> <a href="#ref-for-comb-one③①">(32)</a>
    <li><a href="#ref-for-comb-one③②">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a> <a href="#ref-for-comb-one③③">(2)</a> <a href="#ref-for-comb-one③④">(3)</a> <a href="#ref-for-comb-one③⑤">(4)</a> <a href="#ref-for-comb-one③⑥">(5)</a> <a href="#ref-for-comb-one③⑦">(6)</a> <a href="#ref-for-comb-one③⑧">(7)</a> <a href="#ref-for-comb-one③⑨">(8)</a> <a href="#ref-for-comb-one④⓪">(9)</a> <a href="#ref-for-comb-one④①">(10)</a> <a href="#ref-for-comb-one④②">(11)</a> <a href="#ref-for-comb-one④③">(12)</a>
    <li><a href="#ref-for-comb-one④④">2.2. 
Painting Area: the background-clip property</a> <a href="#ref-for-comb-one④⑤">(2)</a>
    <li><a href="#ref-for-comb-one④⑥">4.2. 
Corner Shaping: the corner-shape property</a>
    <li><a href="#ref-for-comb-one④⑦">5.1. 
Partial Borders: the border-limit property</a> <a href="#ref-for-comb-one④⑧">(2)</a> <a href="#ref-for-comb-one④⑨">(3)</a> <a href="#ref-for-comb-one⑤⓪">(4)</a> <a href="#ref-for-comb-one⑤①">(5)</a> <a href="#ref-for-comb-one⑤②">(6)</a>
    <li><a href="#ref-for-comb-one⑤③">5.2. 
The border-clip properties</a> <a href="#ref-for-comb-one⑤④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">4.3. 
Corner Shape and Size: the corners shorthand</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-collapse">
   <a href="https://drafts.csswg.org/css2/tables.html#propdef-border-collapse">https://drafts.csswg.org/css2/tables.html#propdef-border-collapse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-collapse">4.1. 
Corner Sizing: the 'border-radius property</a>
    <li><a href="#ref-for-propdef-border-collapse①">4.2. 
Corner Shaping: the corner-shape property</a>
    <li><a href="#ref-for-propdef-border-collapse②">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-box">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#typedef-box">https://drafts.csswg.org/css-backgrounds-3/#typedef-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-box">2.2. 
Painting Area: the background-clip property</a> <a href="#ref-for-typedef-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-repeat">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-repeat①">6.1. 
Additions Since Level 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-style">2.2. 
Painting Area: the background-clip property</a>
    <li><a href="#ref-for-propdef-border-style①">3.1. Line Colors: the border-color properties</a> <a href="#ref-for-propdef-border-style②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-width">2.2. 
Painting Area: the background-clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-background-position-center">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#valdef-background-position-center">https://drafts.csswg.org/css-backgrounds-3/#valdef-background-position-center</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-background-position-center">2.1. 
Background Positioning: the background-position shorthand property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-flex">
   <a href="https://drafts.csswg.org/css-grid-1/#typedef-flex">https://drafts.csswg.org/css-grid-1/#typedef-flex</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-flex">5.2. 
The border-clip properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-flex-fr">
   <a href="https://drafts.csswg.org/css-grid-1/#valdef-flex-fr">https://drafts.csswg.org/css-grid-1/#valdef-flex-fr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-flex-fr">5.2. 
The border-clip properties</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-color-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-easing-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-funcdef-cubic-bezier-easing-function-cubic-bezier" style="color:initial">cubic-bezier()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-shapes-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-funcdef-path" style="color:initial">path()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-text-space-collapse-collapse" style="color:initial">collapse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-req" style="color:initial">!</span>
     <li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
     <li><span class="dfn-paneled" id="term-for-comb-all" style="color:initial">&amp;&amp;</span>
     <li><span class="dfn-paneled" id="term-for-mult-one-plus" style="color:initial">+</span>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-mult-num-range" style="color:initial">{a,b}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS21]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border-collapse" style="color:initial">border-collapse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3BG]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-box" style="color:initial">&lt;box></span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-repeat" style="color:initial">background-repeat</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-style" style="color:initial">border-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-width" style="color:initial">border-width</span>
     <li><span class="dfn-paneled" id="term-for-valdef-background-position-center" style="color:initial">center</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3GRID]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-flex" style="color:initial">&lt;flex></span>
     <li><span class="dfn-paneled" id="term-for-valdef-flex-fr" style="color:initial">fr</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-color-3">[CSS-COLOR-3]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-css-easing-1">[CSS-EASING-1]
   <dd>Brian Birtles; Dean Jackson; Matt Rakow. <a href="https://www.w3.org/TR/css-easing-1/">CSS Easing Functions Level 1</a>. 30 April 2019. CR. URL: <a href="https://www.w3.org/TR/css-easing-1/">https://www.w3.org/TR/css-easing-1/</a>
   <dt id="biblio-css-shapes-2">[CSS-SHAPES-2]
   <dd>CSS Shapes Module Level 2 URL: <a href="https://drafts.csswg.org/css-shapes-2/">https://drafts.csswg.org/css-shapes-2/</a>
   <dt id="biblio-css-text-4">[CSS-TEXT-4]
   <dd>Elika Etemad; Koji Ishii; Alan Stearns. <a href="https://www.w3.org/TR/css-text-4/">CSS Text Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-4/">https://www.w3.org/TR/css-text-4/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3bg">[CSS3BG]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css3grid">[CSS3GRID]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css1">[CSS1]
   <dd>Håkon Wium Lie; Bert Bos. <a href="https://www.w3.org/TR/CSS1/">Cascading Style Sheets, level 1</a>. 13 September 2018. REC. URL: <a href="https://www.w3.org/TR/CSS1/">https://www.w3.org/TR/CSS1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip①">background-clip</a>
      <td>&lt;bg-clip>#
      <td>border-box
      <td>all elements
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position③">background-position</a>
      <td>&lt;position>#
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-position-block" id="ref-for-propdef-background-position-block②">background-position-block</a>
      <td>[ center | [ start | end ]? &lt;length-percentage>? ]#
      <td>not applicable (initial value comes from physical property)
      <td>all elements
      <td>no
      <td>refer to size of background positioning area minus size of background image
      <td>discrete
      <td>per grammar
      <td>A list, each item consisting of: an offset given as a computed &lt;length-percentage> value, plus an origin keyword
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-position-inline" id="ref-for-propdef-background-position-inline②">background-position-inline</a>
      <td>[ center | [ start | end ]? &lt;length-percentage>? ]#
      <td>not applicable (initial value comes from physical property)
      <td>all elements
      <td>no
      <td>refer to inline-size of background positioning area minus inline-size of background image
      <td>discrete
      <td>per grammar
      <td>A list, each item consisting of: an offset given as a computed &lt;length-percentage> value, plus an origin keyword
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-position-x" id="ref-for-propdef-background-position-x②">background-position-x</a>
      <td>[ center | [ [ left | right | x-start | x-end ]? &lt;length-percentage>? ]! ]#
      <td>0%
      <td>all elements
      <td>no
      <td>refer to width of background positioning area minus width of background image
      <td>discrete
      <td>per grammar
      <td>A list, each item consisting of: an offset given as a computed &lt;length-percentage> value, plus an origin keyword
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-position-y" id="ref-for-propdef-background-position-y②">background-position-y</a>
      <td>[ center | [ [ top | bottom | y-start | y-end ]? &lt;length-percentage>? ]! ]#
      <td>0%
      <td>all elements
      <td>no
      <td>refer to height of background positioning area minus height of background image
      <td>discrete
      <td>per grammar
      <td>A list, each item consisting of: an offset given as a computed &lt;length-percentage> value, plus an origin keyword
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color">border-bottom-color</a>
      <td>&lt;color>#
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>see prose
      <td>per grammar
      <td>the computed color
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-clip" id="ref-for-propdef-border-clip③">border-clip</a>
      <td>normal | [ &lt;length-percentage> | &lt;flex> ]+
      <td>normal
      <td>all elements
      <td>no
      <td>refer to length of border-edge side
      <td>discrete
      <td>per grammar
      <td>normal, or a list consisting of absolute lengths, or percentages as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-clip-bottom" id="ref-for-propdef-border-clip-bottom">border-clip-bottom</a>
      <td>normal | [ &lt;length-percentage> | &lt;flex> ]+
      <td>normal
      <td>all elements
      <td>no
      <td>refer to length of border-edge side
      <td>discrete
      <td>per grammar
      <td>normal, or a list consisting of absolute lengths, or percentages as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-clip-left" id="ref-for-propdef-border-clip-left">border-clip-left</a>
      <td>normal | [ &lt;length-percentage> | &lt;flex> ]+
      <td>normal
      <td>all elements
      <td>no
      <td>refer to length of border-edge side
      <td>discrete
      <td>per grammar
      <td>normal, or a list consisting of absolute lengths, or percentages as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-clip-right" id="ref-for-propdef-border-clip-right">border-clip-right</a>
      <td>normal | [ &lt;length-percentage> | &lt;flex> ]+
      <td>normal
      <td>all elements
      <td>no
      <td>refer to length of border-edge side
      <td>discrete
      <td>per grammar
      <td>normal, or a list consisting of absolute lengths, or percentages as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-clip-top" id="ref-for-propdef-border-clip-top">border-clip-top</a>
      <td>normal | [ &lt;length-percentage> | &lt;flex> ]+
      <td>normal
      <td>all elements
      <td>no
      <td>refer to length of border-edge side
      <td>discrete
      <td>per grammar
      <td>normal, or a list consisting of absolute lengths, or percentages as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color③">border-color</a>
      <td>&lt;color>#{1,4}
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-left-color" id="ref-for-propdef-border-left-color">border-left-color</a>
      <td>&lt;color>#
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>see prose
      <td>per grammar
      <td>the computed color
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-limit" id="ref-for-propdef-border-limit①">border-limit</a>
      <td>all | [ sides | corners ] &lt;length-percentage>?
| [ top | right | bottom | left ] &lt;length-percentage>
      <td>round
      <td>all elements, except table element when border-collapse is collapse
      <td>no
      <td>relative to border-box
      <td>discrete
      <td>per grammar
      <td>as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius④">border-radius</a>
      <td>&lt;length-percentage>{1,4} [ / &lt;length-percentage>{1,4} ]?
      <td>0
      <td>all elements, except table element when border-collapse is collapse
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-right-color" id="ref-for-propdef-border-right-color">border-right-color</a>
      <td>&lt;color>#
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>see prose
      <td>per grammar
      <td>the computed color
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-top-color" id="ref-for-propdef-border-top-color">border-top-color</a>
      <td>&lt;color>#
      <td>currentcolor
      <td>all elements
      <td>no
      <td>n/a
      <td>see prose
      <td>per grammar
      <td>the computed color
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-corner-shape" id="ref-for-propdef-corner-shape⑦">corner-shape</a>
      <td>[ round | angle ]{1,4}
      <td>round
      <td>all elements, except table element when border-collapse is collapse
      <td>no
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-corners" id="ref-for-propdef-corners③">corners</a>
      <td>&lt;'corner-shape'> || &lt;'border-radius'>
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> This module is currently maintained as a diff against Level 3.
		We will fold in the text once it’s all formatted up and in CR again,
		as this will reduce the effort of keeping them in sync
		(source diffs will be accurate in reflecting the differences). <a href="#issue-ea0786c6"> ↵ </a></div>
   <div class="issue"> Specify the value assignment in more detail. Should expand just like Level 3.<a href="#issue-e752f96e"> ↵ </a></div>
   <div class="issue"> Specify what happens to set of properties that are not set. Maybe they’re just not set?<a href="#issue-f4a1aeb0"> ↵ </a></div>
   <div class="issue"> This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.<a href="#issue-67389536"> ↵ </a></div>
   <div class="issue"> Or should this be defining the <span class="css">-webkit-background-clip</span> property,
	saying that all the values are identical,
	with this additional <a class="css" data-link-type="maybe" href="#valdef-background-clip-text">text</a> value?<a href="#issue-09d02635"> ↵ </a></div>
   <div class="issue"> The syntax for comma-separated multiple colors <a href="https://github.com/w3c/csswg-drafts/issues/1172#issuecomment-379878579">is still under active discussion</a> in the CSS WG.<a href="#issue-bce6fb8f"> ↵ </a></div>
   <div class="issue"> How to allow custom corners? Perhaps a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">path()</a> function? Or a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-easing-1/#funcdef-cubic-bezier-easing-function-cubic-bezier">cubic-bezier()</a>?
		Something else? <a href="#issue-7e583689"> ↵ </a></div>
   <div class="issue"> Here are two proposals for doing this:
		the second one is from GCPM, the first one is an attempt to recast it more readably.
		The names are terrible, known problem, proposals accepted.
		There is a problem with conceiving this as clipping:
		if you have dotted borders, you want whole dots always, not parts of dots.
		So it should be a drawing limit, not a clip. <a href="#issue-76b7fb28"> ↵ </a></div>
   <div class="issue">Should these properties be simplified to only accept <code>normal | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">&lt;length-percentage></a>+</code>? <a href="#issue-3b47c92d"> ↵ </a></div>
   <div class="issue">Additions are a work in progress... here’s what we’re planning to add. :) <a href="#issue-faa8d599"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="propdef-background-position">
   <b><a href="#propdef-background-position">#propdef-background-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position①">2.1. 
Background Positioning: the background-position shorthand property</a>
    <li><a href="#ref-for-propdef-background-position②">6.1. 
Additions Since Level 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-position">
   <b><a href="#typedef-position">#typedef-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-position">2.1. 
Background Positioning: the background-position shorthand property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-background-position-x">
   <b><a href="#propdef-background-position-x">#propdef-background-position-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position-x">2.1. 
Background Positioning: the background-position shorthand property</a>
    <li><a href="#ref-for-propdef-background-position-x①">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-background-position-y">
   <b><a href="#propdef-background-position-y">#propdef-background-position-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position-y">2.1. 
Background Positioning: the background-position shorthand property</a>
    <li><a href="#ref-for-propdef-background-position-y①">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-background-position-inline">
   <b><a href="#propdef-background-position-inline">#propdef-background-position-inline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position-inline">2.1. 
Background Positioning: the background-position shorthand property</a>
    <li><a href="#ref-for-propdef-background-position-inline①">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-background-position-block">
   <b><a href="#propdef-background-position-block">#propdef-background-position-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position-block">2.1. 
Background Positioning: the background-position shorthand property</a>
    <li><a href="#ref-for-propdef-background-position-block①">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-background-clip">
   <b><a href="#propdef-background-clip">#propdef-background-clip</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-clip">2.2. 
Painting Area: the background-clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-bg-clip">
   <b><a href="#typedef-bg-clip">#typedef-bg-clip</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-bg-clip">2.2. 
Painting Area: the background-clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-background-clip-text">
   <b><a href="#valdef-background-clip-text">#valdef-background-clip-text</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-background-clip-text">2.2. 
Painting Area: the background-clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-color">
   <b><a href="#propdef-border-color">#propdef-border-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-color">2.2. 
Painting Area: the background-clip property</a>
    <li><a href="#ref-for-propdef-border-color①">3.1. Line Colors: the border-color properties</a> <a href="#ref-for-propdef-border-color②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-radius">
   <b><a href="#propdef-border-radius">#propdef-border-radius</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-radius">4.2. 
Corner Shaping: the corner-shape property</a>
    <li><a href="#ref-for-propdef-border-radius①">4.3. 
Corner Shape and Size: the corners shorthand</a> <a href="#ref-for-propdef-border-radius②">(2)</a> <a href="#ref-for-propdef-border-radius③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-corner-shape">
   <b><a href="#propdef-corner-shape">#propdef-corner-shape</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-corner-shape①">4.2. 
Corner Shaping: the corner-shape property</a> <a href="#ref-for-propdef-corner-shape②">(2)</a>
    <li><a href="#ref-for-propdef-corner-shape③">4.3. 
Corner Shape and Size: the corners shorthand</a> <a href="#ref-for-propdef-corner-shape④">(2)</a> <a href="#ref-for-propdef-corner-shape⑤">(3)</a>
    <li><a href="#ref-for-propdef-corner-shape⑥">6.1. 
Additions Since Level 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-corner-shape-round">
   <b><a href="#valdef-corner-shape-round">#valdef-corner-shape-round</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-corner-shape-round">4.2. 
Corner Shaping: the corner-shape property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-corner-shape-angle">
   <b><a href="#valdef-corner-shape-angle">#valdef-corner-shape-angle</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-corner-shape-angle">4.2. 
Corner Shaping: the corner-shape property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-corners">
   <b><a href="#propdef-corners">#propdef-corners</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-corners">4.3. 
Corner Shape and Size: the corners shorthand</a> <a href="#ref-for-propdef-corners①">(2)</a> <a href="#ref-for-propdef-corners②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-limit">
   <b><a href="#propdef-border-limit">#propdef-border-limit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-limit">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-border-limit-sides">
   <b><a href="#valdef-border-limit-sides">#valdef-border-limit-sides</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-border-limit-sides">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-border-limit-corners">
   <b><a href="#valdef-border-limit-corners">#valdef-border-limit-corners</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-border-limit-corners">5.1. 
Partial Borders: the border-limit property</a> <a href="#ref-for-valdef-border-limit-corners①">(2)</a> <a href="#ref-for-valdef-border-limit-corners②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-border-limit-left">
   <b><a href="#valdef-border-limit-left">#valdef-border-limit-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-border-limit-left">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a>
    <li><a href="#ref-for-valdef-border-limit-left①">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-border-limit-right">
   <b><a href="#valdef-border-limit-right">#valdef-border-limit-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-border-limit-right">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-border-limit-top">
   <b><a href="#valdef-border-limit-top">#valdef-border-limit-top</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-border-limit-top">2.1.1. 
Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties</a>
    <li><a href="#ref-for-valdef-border-limit-top①">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-border-limit-bottom">
   <b><a href="#valdef-border-limit-bottom">#valdef-border-limit-bottom</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-border-limit-bottom">5.1. 
Partial Borders: the border-limit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-border-clip">
   <b><a href="#propdef-border-clip">#propdef-border-clip</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-clip①">5.2. 
The border-clip properties</a> <a href="#ref-for-propdef-border-clip②">(2)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>